<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                :default-sort = "{prop: 'regDate', order: 'descending'}">
            <el-table-column
                    fixed
                    prop="cardNo"
                    label="病历号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="regDate"
                    label="挂号日期"
                    width="220" sortable>
                <template scope="scope">
                    <!--调用过滤器显示需要的数据 -->
                    <el-tag type="success">{{scope.row.regDate|dateFormat}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="姓名">
                            <span>{{ props.row.patient.name }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    prop="patientCode"
                    label="病人号码"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="ynsee"
                    label="是否看诊"
                    :filters="[{ text: '是', value: '1' }, { text: '否', value: '0' }]"
                    :filter-method="filterTag"
                    width="120">
                <template scope="scope">
                    <!--调用过滤器显示需要的数据 -->
                    <el-tag type="success">{{scope.row.ynsee|ynsee}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="pactName"
                    label="合同单位"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="reglevlName"
                    label="挂号级别"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="deptCode"
                    label="科室号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="doctName"
                    label="看诊医生号码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="invoiceNo"
                    label="发票号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="diagFee"
                    label="侦察费"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="othFee"
                    label="附加费"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="ownCost"
                    label="自费金额"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="pubCost"
                    label="报销金额"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="payCost"
                    label="自付金额"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="operCode"
                    label="操作员代码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="operDate"
                    label="操作时间"
                    sortable
                    width="220">
                <template scope="scope">
                    <!--调用过滤器显示需要的数据 -->
                    <el-tag type="success">{{scope.row.operDate|dateFormat}}</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="page">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageInfo.pageSize"
                    @current-change="handleCurrentChange"
                    :total="pageInfo.total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    import {HOST} from "../../common/config";
    import {makeDate} from '../../common/dealDate'
    export default {
        name: "RegisterSearch",
        data() {
            return {
                tableData: [],
                pageInfo:[]
            }
        },
        mounted:function () {
            this.getData(1);
        },
        methods: {
            handleClick(row) {
                console.log(row);
            },
            getData(page){
                let path=`${HOST}/registers?currentPage=${page}`;
                this.$ajax.get(path).then((res)=>{
                    this.pageInfo=res.data;
                    this.tableData=res.data.list;
                })
            },
            handleCurrentChange(val){
                this.getData(val);
            },
            filterTag(value, row) {
                return row.ynsee === value;
            }
        },
        filters:{
            dateFormat(val){
                return makeDate(val)
            },
            ynsee(val){
                if(val==='0'){
                    return "否";
                }else {
                    return "是";
                }
            }
        }

    }
</script>

<style scoped>
    .page{
        margin-top: 10px;
    }

    .el-form-item__label {
        width: 90px;
        color: #99a9bf;
    }
</style>